import {Grid, List, ListItem} from "@material-ui/core";
import * as React from 'react';
import Info from "../../components/Info";
import {patientChoose, patientListFetch} from "../../store/actions";
import {AppPageProps} from "../../types/AppPageProps";
import CardHeader from "../mymedicalcard/CardHeader";


interface Data {
    id: string,
    detail: string
}

interface DoctorProps extends AppPageProps {
    expands: string,
    list: Data[],
}

class PatientList extends React.Component<DoctorProps> {

    public handleClick = (id: string) => {
        // this.props.dispatch(doctorExpandItem(id));
    };

    public moreClick = (id: string) => {
        this.props.history.push({
            pathname: "/doctor/source/list",
            state: {id}
        })
    };

    public componentWillMount() {
        // const {id} = this.props.history.location.state;
        // const id = "1";
        this.props.dispatch(patientListFetch({}));
    }

    public onChoose(item: object) {
        console.log("PatientList.tsx:39->'choose'", 'choose');
        console.log("PatientList.tsx:40->this", this);
        this.props.history.goBack();
        this.props.dispatch(patientChoose(item));
    }


    public render() {
        const {expands, list = []} = this.props;
        console.log("PatientList.tsx:41->this.props", this.props);
        return (
            <List
                component="div"
                subheader={
                    <CardHeader
                        title={"选择就诊卡"}
                        diplayButton={false}
                        url={""}
                        buttonName={""}/>
                }
            >
                {
                    list.map((each: any, index) => {
                        const {id, name, hospital, idCard} = each;
                        return <ListItem key={id} button={true} onClick={this.onChoose.bind(this, each)}>
                            <Info expands={id === expands}
                                  data={each}
                                  showDivider={index !== list.length - 1}
                                  style={{alignItems: "center", textAlign: "center"}}
                            >
                                <p>
                                    姓名：{name}
                                </p>
                                <p>
                                    注册医院：{hospital}
                                </p>
                                <p>
                                    身份证号：{idCard}
                                </p>
                                <p>
                                    就诊卡号：{hospital}
                                </p>
                            </Info>
                        </ListItem>;
                    })
                }
            </List>
        );
    }
}

export default PatientList;